import styled from "@emotion/styled";
import { Button, Typography } from "antd";
import { useState } from "react";

import { EditListScreens } from "./edit-list";
import { EditLoginScreen } from "./edit-login";
import { EditModalScreen } from "./edit-modal";
import { useShowEditModal } from "./util";

const EditScreen = () => {
  const [isLogin, setIsLogin] = useState(localStorage.getItem("look_this"));
  const showEditModal = useShowEditModal();
  const onAddContent = () => {
    showEditModal(undefined);
  };

  return !isLogin ? (
    <Container>
      <EditLoginScreen setIsLogin={setIsLogin} />
    </Container>
  ) : (
    <Container>
      <Typography.Title level={3}>{"网站内容操作界面"}</Typography.Title>
      <AddBtn type="default" onClick={onAddContent}>
        {"添加文章"}
      </AddBtn>
      <EditListScreens />
      <EditModalScreen />
    </Container>
  );
};

const AddBtn = styled(Button)`
  position: absolute;
  top: 2rem;
  right: 1rem;
`;

const Container = styled.div`
  position: relative;
  width: 100%;
  max-width: 130rem;
  min-height: calc(100vh - 4rem);
  margin-top: 4rem;
  display: flex;
  align-items: center;
  padding: 1rem;
  flex-direction: column;
`;

export default EditScreen;
